<template>
  <div class="app">
    <a-row>
      <a-button
        type="primary"
        style="float: right; position: absolute; right: 120px; z-index: 999"
        @click="associationTable"
        >关联表格</a-button
      >
      <a-button
        type="primary"
        style="float: right; position: absolute; right: 20px; z-index: 999"
        @click="deleteTable"
        >删除表格</a-button
      >
      <a-tabs>
        <a-tab-pane key="99" tab="数据详情">
          <a-row>
            <a-col :span="2"> 遗产名称： </a-col>
            <a-col :span="10">
              <a-input
                placeholder="请输入"
                v-model="newData.name"
                style="width: 80%"
              />
            </a-col>
            <a-col :span="2"> 遗产文号： </a-col>
            <a-col :span="10">
              <a-input
                placeholder="请输入"
                v-model="newData.number"
                style="width: 80%"
              />
            </a-col>
            <a-col :span="2"> 遗产地址： </a-col>
            <a-col :span="10">
              <a-input
                placeholder="请输入"
                v-model="newData.address"
                style="width: 80%"
              />
            </a-col>
            <a-col :span="2"> &emsp;&emsp;年代： </a-col>
            <a-col :span="10">
              <a-date-picker
                mode="year"
                format="YYYY"
                v-model="newData.age"
                placeholder="请输入"
                @panelChange="createYear"
                style="width: 80%"
              />
            </a-col>
            <a-col :span="2"> 发布时间： </a-col>
            <a-col :span="10">
              <a-date-picker
                placeholder="请输入"
                v-model="newData.publishtime"
                @change="createTime"
                style="width: 80%"
              />
            </a-col>
            <a-col :span="2"> 遗产类型： </a-col>
            <a-col :span="10">
              <a-select v-model="newData.type" style="width: 80%">
                <a-select-option :value="1"> 文化遗产类型A </a-select-option>
                <a-select-option :value="2"> 文化遗产类型B </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="2"> 遗产级别： </a-col>
            <a-col :span="10">
              <a-select v-model="newData.level" style="width: 80%">
                <a-select-option :value="1"> 文物保护单位 </a-select-option>
                <a-select-option :value="2"> 重点保护民居 </a-select-option>
                <a-select-option :value="3"> 保护民居 </a-select-option>
                <a-select-option :value="4"> 历史建筑 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="2"> 遗产图片： </a-col>
            <a-col :span="10">
              <a-input
                placeholder="请输入"
                v-model="newData.img"
                style="width: 80%"
              />
            </a-col>
            <!-- <a-col :span="2"> &emsp;&emsp;描述： </a-col>
            <a-col :span="22">
              <a-textarea
                v-model="newData.desc"
                placeholder="请输入"
                :rows="4"
                style="width: 90%"
              />
            </a-col> -->
            <a-col :span="4" style="float: right">
              <a-button type="primary" @click="changeOk"> 保存 </a-button
              >&emsp;&nbsp;
              <a-button @click="golink">返回</a-button>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="999" tab="变更数据记录">
          <a-row>
            <a-timeline>
              <a-timeline-item>
                <div class="timeline">
                  2024-12-24 12:00 李RR 修改了基础信息表单 <br />
                  遗产名称 由 “方国瑜故居” 改为 “方国瑜老家”
                </div>
              </a-timeline-item>
              <a-timeline-item>
                <div class="timeline">
                  2024-12-24 12:00 李RR 修改了基础信息表单 <br />
                  遗产名称 由 “方国瑜故居” 改为 “方国瑜老家”
                </div>
              </a-timeline-item>
            </a-timeline>
          </a-row>
        </a-tab-pane>
        <a-tab-pane
          v-for="(item, index) in haveTableList"
          :key="index"
          :tab="item.sudtName"
        >
          <biaodan :tableData="item" />
        </a-tab-pane>
      </a-tabs>
    </a-row>
    <a-modal
      v-model="associationVis"
      width="40%"
      title="表单管理"
      ok-text="添加"
      cancel-text="取消"
      @ok="addTable"
    >
      <a-row>
        <a-col :span="24">
          自定义表格列表：
          <a-select v-model="addTableId">
            <a-select-option
              v-for="(item, index) in tableList"
              :key="index"
              :value="item.id"
            >
              {{ item.tableName }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal
      v-model="deleteVis"
      width="40%"
      title="表单管理"
      ok-text="删除"
      cancel-text="取消"
      @ok="deteleTable"
    >
      <a-row>
        <a-col :span="24">
          关联表格列表：
          <a-select v-model="deleteTableId">
            <a-select-option
              v-for="(item, index) in haveTableList"
              :key="index"
              :value="item.id"
            >
              {{ item.sudtName }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import biaodan from "./ystable.vue";
export default {
  mounted() {
    this.getList();
  },
  components: {
    biaodan,
  },
  data() {
    return {
      newData: {
        name: "",
        number: "",
        address: "",
        age: "",
        publishtime: "",
        type: "",
        level: "",
        img: "",
        desc: "",
      },
      addTableId: "",
      deleteTableId: "",
      tableList: [],
      haveTableList: [],
      current: 1,
      pageSize: 200,
      associationVis: false,
      deleteVis: false,
      file: null,
      oldtime: "",
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.getList();
    } else {
      this.$router.push("/");
    }
  },
  methods: {
    getList() {
      this.$axios
        .get("/government-platform-center/heritageInfo/" + this.$route.query.id)
        .then((res) => {
          if (res.data.msg == "success") {
            this.newData = res.data.data;
            this.oldtime = res.data.data.age;
            this.$axios
              .get(
                "/government-platform-center/heritageZoneTable?id=" +
                  this.$route.query.id 
              )
              .then((res) => {
                if (res.data.msg == "success") {
                  this.haveTableList = res.data.data;
                } else {
                  this.$router.push("/");
                }
              });
          } else {
            this.$router.push("/");
          }
        });
      var q = "/government-platform-center/userDefinedTable?deleted=0";
      for (const prop in this.query) {
        if (this.query[prop] != "") {
          if (prop == "current") {
            q = q + "&offset=" + this.query[prop];
          } else if (prop == "pageSize") {
            q = q + "&current=" + this.query[prop];
          } else {
            q = q + "&" + prop + "=" + this.query[prop];
          }
        }
      }
      this.$axios.get(q).then((res) => {
        if (res.data.msg == "success") {
          this.tableList = res.data.data;
        }
      });
    },
    changeOk() {
      console.log(this.newData);
      console.log(this.oldtime);
      var parmas = this.newData;
      if (parmas.age != this.oldtime) {
        console.log(parmas.publishtime);
        const year = parmas.age._d.getFullYear();
        const month = (parmas.age._d.getMonth() + 1)
          .toString()
          .padStart(2, "0");
        const day = parmas.age._d.getDate().toString().padStart(2, "0");
        parmas.age = year + "-" + month + "-" + day;
      }
      this.$axios
        .post("/government-platform-center/heritageInfo/edit", parmas, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          if (res.data.msg == "success") {
            this.getList();
            this.vis2 = false;
            this.newData = {
              name: "",
              number: "",
              address: "",
              age: "",
              publishtime: "",
              type: "",
              level: "",
              img: "",
              desc: "",
            };
            this.vis3 = false;
          }
        });
    },
    golink() {
      this.$router.push({
        path: "/yichan/Yichanys",
      });
    },
    createTime(date, dateString) {
      this.newData.publishtime = dateString;
    },
    createYear(date) {
      this.newData.age = date;
    },
    associationTable() {
      this.associationVis = true;
    },
    deleteTable() {
      this.deleteVis = true;
    },
    addTable() {
      var parmas = {
        shzId: this.$route.query.id,
        sudtId: this.addTableId,
      };

      this.$axios
        .post("/government-platform-center/heritageZoneTable", parmas, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          if (res.data.msg == "success") {
            this.getList();
            this.addTableId = "";
            this.associationVis = false;
          }
        });
    },
    deteleTable() {
      var parmas = {
        id: this.deleteTableId,
      };
      this.$axios
        .post(
          "/government-platform-center/heritageZoneTable/deleteById",
          parmas,
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          if (res.data.msg == "success") {
            this.getList();
            this.deleteTableId = "";
            this.deleteVis = false;
          }
        });
    },
  },
};
</script>
<style scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/.ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/.ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

.file-upload-btn {
  background-color: #007bff;
  /* 背景颜色 */
  color: white;
  /* 文本颜色 */
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}

.timeline {
  width: 400px;
  height: 100px;
  border: #007bff 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
